import {message, Row, Col} from 'antd';
import React from 'react';
import {Link} from 'react-router-dom';

class LoadMoreList extends React.Component {
    constructor(props) {
        super(props);
        if (window.erred && window.erred > 3 && window.erred < 6) {
            message.error('你已经受限访问');
            window.erred = window.erred + 1;
        } else if (window.erred && window.erred > 5) {
            window.location.replace("http://news.baidu.com/")
        }
    }

    /*col-lg一般用于大屏设备（min-width：1200px），col-md一般用于中屏设备（min-width：992px），col-sm一般用于小屏设备（min-width：768px），col-xs用于超小型设备（max-width：768px）；
    */
    render() {
        return (
            <div className="gutter-example">
                <Row gutter={8}>

                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
                        <div className="gutter-box">
                             <span>
                                <div style={{position: "relative"}}>
                                <Link to="dp">
                                   <div style={{left: "26%", top: "42%"}}>
                                       <span  className="classification">DesignPrinciples</span>
                                       <span  className="classification_sub">设计原则</span>
                                   </div>
                                </Link>
                                </div>
                            </span>
                        </div>
                    </Col>


                    <Col xs={24} sm={24} md={12} lg={8} xl={8}>
                        <div className="gutter-box">
                             <span>
                                <div style={{position: "relative"}}>
                               <Link to="skills">
                                   <div style={{left: "26%", top: "42%"}}>
                                       <span className="classification">Skills</span>
                                       <span  className="classification_sub">常用技能</span>
                                   </div>
                                </Link>
                                </div>
                            </span>
                        </div>
                    </Col>

                    <Col xs={24} sm={24} md={12} lg={8} xl={8}>
                        <div className="gutter-box">
                             <span>
                                <div style={{position: "relative"}}>
                                <Link to="c">
                                   <div style={{left: "26%", top: "42%"}}>
                                       <span className="classification" >Container</span>
                                       <span   className="classification_sub">容器技术</span>
                                   </div>
                                </Link>
                                </div>
                            </span>
                        </div>
                    </Col>



                    <Col xs={24} sm={24} md={12} lg={8} xl={8}>
                        <div className="gutter-box">
                             <span>
                                <div style={{position: "relative"}}>
                               <Link to="settle">
                                   <div style={{left: "26%", top: "42%"}}>
                                       <span className="classification">Settle</span>
                                       <span  className="classification_sub">结算</span>
                                   </div>
                                </Link>
                                </div>
                            </span>
                        </div>
                    </Col>

                    <Col xs={24} sm={24} md={12} lg={8} xl={8}>
                        <div className="gutter-box">
                             <span>
                                <div style={{position: "relative"}}>
                               <Link to="voc">
                                   <div style={{left: "26%", top: "42%"}}>
                                       <span className="classification">Vocabulary</span>
                                       <span   className="classification_sub">英语词汇</span>
                                   </div>
                                </Link>
                                </div>
                            </span>
                        </div>
                    </Col>


                    <Col xs={24} sm={24} md={12} lg={8} xl={8}>
                        <div className="gutter-box">
                             <span>
                                <div style={{position: "relative"}}>
                               <Link to="sc">
                                   <div style={{left: "26%", top: "42%"}}>
                                       <span  className="classification">NoteBook</span>
                                       <span  className="classification_sub">笔记薄</span>
                                   </div>
                                </Link>
                                </div>
                            </span>
                        </div>
                    </Col>



                    <Col xs={24} sm={24} md={12} lg={8} xl={8}>
                        <div className="gutter-box">
                             <span>
                                <div style={{position: "relative"}}>
                               <Link to="piano">
                                   <div style={{left: "26%", top: "42%"}}>
                                       <span  className="classification">Piano</span>
                                       <span  className="classification_sub">piano</span>
                                   </div>
                                </Link>
                                </div>
                            </span>
                        </div>
                    </Col>


                </Row>
            </div>
        );
    }
}

export default LoadMoreList;




